.thredded--navigation {
  position: relative;
  .thredded--icon {
    display: none;
  }
}

@include thredded-media-tablet-and-down {
  $icon-nav-item-gutter: 0.5rem;
  $icon-nav-item-width: (2.125rem + $icon-nav-item-gutter);
  %icon-nav-item {
    box-sizing: border-box;
    margin: 0 0 0 $icon-nav-item-gutter;
    padding: 0;
    vertical-align: top;
    a {
      position: relative;
      display: block;
      padding: 0.4375rem 0 0.375rem 0;
    }
    .thredded--icon {
      display: block;
      width: 2rem;
      height: 2rem;
    }
  }
  %icon-counter {
    bottom: 0.3125rem;
    position: absolute;
    right: -0.1875rem;
  }
  .thredded--navigation {
    position: relative;
    width: 100%;
  }
  .thredded--navigation-breadcrumbs {
    font-size: $thredded-font-size-small;
    padding-right: $icon-nav-item-width * 1;
    .thredded--global-nav-icons-1 & {
      padding-right: $icon-nav-item-width * 2;
    }
    .thredded--global-nav-icons-2 & {
      padding-right: $icon-nav-item-width * 3;
    }
    .thredded--global-nav-icons-3 & {
      padding-right: $icon-nav-item-width * 4;
    }
  }

  .thredded--navigation--search-topics {
    display: none;
    .thredded--messageboards-index &,
    .thredded--topics-index &,
    .thredded--topic-search-results & {
      @media screen {
        display: block;
        width: 100%;
      }
    }
  }
  .thredded--user-navigation {
    border-bottom: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    &-standalone {
      display: block;
      margin-bottom: 0;
    }
    &--item {
      .thredded--nav-text {
        display: none;
      }
    }
    &--unread-topics {
      @extend %icon-nav-item;
      &--followed-count {
        @extend %icon-counter;
      }
    }
    &--settings {
      @extend %icon-nav-item;
    }
    &--private-topics {
      @extend %icon-nav-item;
      &--unread {
        @extend %icon-counter;
      }
    }
    &--moderation {
      @extend %icon-nav-item;
      &--pending-count {
        @extend %icon-counter
      }
    }
    &--moderation.thredded--is-current ~ &--settings,
    &--moderation.thredded--is-current ~ &--private-topics {
      display: none;
    }
  }
  .thredded--scoped-navigation {
    position: absolute;
    top: 0;
    right: 0;
    .thredded--global-nav-icons-1 & {
      right: $icon-nav-item-width;
    }
    .thredded--global-nav-icons-2 & {
      right: $icon-nav-item-width * 2;
    }
    .thredded--global-nav-icons-3 & {
      right: $icon-nav-item-width * 3;
    }
  }
}
